<template>
  <el-card class="mb-20" body-class="no-padding" v-for="(arr, label) in tableList" :key="label" :ref="`card-${label}`">
    <template #header>
      <div class="flex_between">
        <span>{{ label }}</span>
        <!-- <el-button type="primary" @click="takeScreenshot(label)">截图</el-button> -->
      </div>
    </template>

    <occupation-table :data="arr">
      <!-- <el-table-column prop="帮会名" label="帮会名" :width="100"></el-table-column> -->
      <el-table-column prop="玩家" label="玩家" fixed :width="130">
        <template #default="{ row }">
          <span class="number" :class="{ brush: row.承伤 < groupArg[row.团长] }">{{ row.玩家 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="职业"
        label="职业"
        :width="80"
        filter-multiple
        :filters="getFilterObject(arr, '职业')"
        :filter-method="filterHandler"
      ></el-table-column>
      <!-- <el-table-column prop="团长" label="团长" :min-width="130"></el-table-column> -->
      <el-table-column
        v-for="(item, index) in columns"
        :label="item.label"
        :width="item.width"
        :key="index"
        :prop="item.prop"
        sortable
        align="right"
        head-align="center"
      >
        <template #default="{ row }">
          <span class="number">{{ formatNumber(row[item.prop]) }}</span>
          <span class="percent" :style="{ '--max': groupMax[label][item.prop], '--value': row[item.prop] }"></span>
        </template>
      </el-table-column>
    </occupation-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import occupationTable from "@/components/occupation-table.vue";
// import html2canvas from "html2canvas";
import { ElMessage } from "element-plus";

const { proxy }: any = getCurrentInstance();
const store = useStore();
const datas = ref(store.getters.getGroupDatas);
const tableList = ref({});
const groupMax = ref({});
const groupArg = ref({});
const columns = [
  {
    label: "击败",
    prop: "击败",
    width: 90,
  },
  {
    label: "助攻",
    prop: "助攻",
    width: 90,
  },
  {
    label: "资源",
    prop: "战备资源",
    width: 90,
  },
  {
    label: "人伤",
    prop: "人伤",
    width: 110,
  },
  {
    label: "塔伤",
    prop: "塔伤",
    width: 110,
  },
  {
    label: "治疗值",
    prop: "治疗值",
    width: 110,
  },
  {
    label: "承伤",
    prop: "承伤",
    width: 110,
  },
  {
    label: "重伤",
    prop: "重伤",
    width: 90,
  },
  {
    label: "青灯焚骨",
    prop: "青灯焚骨",
    width: 120,
  },
  {
    label: "战复",
    prop: "战复",
    width: 90,
  },
  {
    label: "控制",
    prop: "控制",
    width: 90,
  },
  {
    label: "总伤",
    prop: "总伤",
    width: 110,
  },
  {
    label: "KDA",
    prop: "KDA",
    width: 90,
  },
  {
    label: "转换系数",
    prop: "转换系数",
    width: 120,
  },
  {
    label: "伤害效率",
    prop: "伤害效率",
    width: 120,
  },
  {
    label: "参团率",
    prop: "参团率",
    width: 100,
  },
];

watch(
  () => store.state.objectType,
  () => {
    process();
  }
);

/** 千分格式化数字 */
const formatNumber = computed(() => (number) => {
  return new Intl.NumberFormat().format(number);
});
/** 数据过滤的选项 */
const getFilterObject = computed(() => (arr, key) => {
  let list = arr.map((item) => item[key]);
  list = Array.from(new Set(list));
  return list.map((item) => {
    return { text: item, value: item };
  });
});
/** 数据过滤 */
const filterHandler = (value, row, col) => {
  const property = col["property"];
  return row[property] === value;
};

const process = () => {
  const { max, list, avg } = store.getters.getGroupDatas;
  groupMax.value = max;
  tableList.value = list;
  groupArg.value = avg;
};

/** 截图 */
// const takeScreenshot = (label) => {
//   html2canvas(proxy.$refs[`card-${label}`][0].$el).then(async (canvas) => {
//     // console.log(canvas.toDataURL("image/png"));
//     let dataURL = canvas.toDataURL("image/png");
//     const data = await fetch(dataURL);
//     const blob = await data.blob();
//     let ClipboardItem = window.ClipboardItem;
//     await navigator.clipboard.write([
//       new ClipboardItem({
//         [blob.type]: blob,
//       }),
//     ]);
//     ElMessage.success("复制成功~~");
//   });
// };

onMounted(() => {
  process();
});
</script>

<style lang="scss" scoped>
// .flex_between {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }
</style>
